import { Graph, Shape } from '@antv/x6/lib/index'
const { Rect, Circle, Ellipse, Polygon, Polyline } = Shape

export default {
  // 基础矩形
  basicRect: new Rect({
    width: 70,
    height: 40,
    data: {
      desc: '矩形1'
    }
  }),

  // 填充矩形
  fillRect: new Rect({
    width: 16,
    height: 35,
    attrs: {
      body: {
        fill: '#000000'
      }
    },
    data: {
      desc: '矩形2'
    }
  }),

  // 填充矩形1
  fillRect1: new Rect({
    width: 2,
    height: 15,
    attrs: {
      body: {
        fill: '#000000'
      }
    },
    data: {
      desc: '矩形3'
    }
  }),

  // 圆形
  circle: new Circle({
    width: 40,
    height: 40,
    data: {
      desc: '圆形'
    }
  }),

  // 椭圆形
  ellipse: new Ellipse({
    width: 60,
    height: 30,
    data: {
      desc: '椭圆形'
    }
  }),

  // 多边形
  polygon: new Polygon({
    points: '0 0, 5 5, 10 0',
    fill: '#ff0000',
    stroke: '#000000',
    width: 10,
    height: 10,
    data: {
      desc: '多边形'
    }
  }),

  // 多边线
  polyline: new Polyline({
    points: '0 20, 10 0, 20 20',
    width: 20,
    height: 20,
    data: {
      desc: '多边线'
    }
  }),

  // 链接桩
  linkNode: new Circle({
    width: 4,
    height: 4,
    attrs: {
      body: {
        r: 4,
        stroke: '#31d0c6',
        fill: '#fff'
      }
    },
    data: {
      isPort: true,
      desc: '链接桩'
    }
  }),

  // 文本节点
  // textNode: new TextBlock({
  //   width: 70,
  //   height: 40,
  //   attrs: {
  //     label: {
  //       text: '文本'
  //     }
  //   },
  //   data: {
  //     desc: '文本'
  //   }
  // }),

  // 创建拖拽用的节点
  createStencilNode(node) {
    const content = node.data && node.data.desc ? node.data.desc : '描述信息'
    var tempNode = node.clone()
    tempNode.addTools([{
      name: 'button',
      args: {
        markup: {
          tagName: 'text',
          textContent: content,
          selector: 'icon',
          attrs: {
            fill: '#fe854f',
            fontSize: 12,
            textAnchor: 'middle',
            pointerEvents: 'none',
            y: '1em'
          }
        },
        x: '50%',
        y: '100%',
        offset: {
          x: 0,
          y: 15
        }
      }
    }])
    return tempNode
  },

  // 注册自定义文本节点
  registerSimpleTextNode() {
    Graph.unregisterNode('simpleText')
    Graph.registerNode('simpleText', {
      width: 40,
      height: 20,
      markup: [{
        tagName: 'text',
        selector: 'body'
      }],
      attrs: {
        body: {
          refX: 0,
          text: '文本',
          style: 'fill:#FFFFFF;font-size:12;font-family:monospace;'
        }
      }
    })
  },

  // 基本图元节点
  getBaiscGroupNodes: function(graph) {
    var nodes = []
    nodes.push(this.createStencilNode(this.basicRect))
    nodes.push(this.createStencilNode(this.fillRect))
    nodes.push(this.createStencilNode(this.fillRect1))
    nodes.push(this.createStencilNode(this.circle))
    nodes.push(this.createStencilNode(this.ellipse))
    nodes.push(this.createStencilNode(this.polygon))
    nodes.push(this.createStencilNode(this.polyline))
    nodes.push(this.createStencilNode(this.linkNode))
    // nodes.push(this.createStencilNode(this.textNode))

    // 注册自定义的文本节点
    this.registerSimpleTextNode()
    const textNode = graph.createNode({
      shape: 'simpleText',
      x: 100,
      y: 100,
      data: {
        desc: '文本'
      }
    })
    nodes.push(this.createStencilNode(textNode))
    return nodes
  }
}
